import react from 'react'
import './index.css'
export default class LinkInput extends react.Component<LinkIput> {
  state: Readonly<LinkIput>;
  constructor(props: LinkIput) {

    super(props)
    // 参数参考文档
    this.state = {
      label: props.label,
      type: props.type ? props.type : 'text',
      value:props.value ? props.value :''
    }

  }
  render(): react.ReactNode {
    const { label, type,value } = this.state
    return (
      <div className='link-input'>
        <div>{label}</div>
        <input type={type} value={value}  onChange={this.onChange} />
      </div>
    )
  }
  // 监听onChange事件
  onChange = (e: any) => {
    this.props.onChange(e.target.value)
    this.setState({
      value:e.target.value
    })

  }
}